<template>
  <div class="pushconfig-container" v-loading="loading">
    <el-card class="pushconfig-titleCard" shadow="never">
      <div class="pushconfig-titleView">
        <span class="pushconfig-title">集成前了解：</span>
        <span class="pushconfig-title">1.iOS默认支持厂商通道，按极光配置，我们仅提供统一推送接口</span>
        <span class="pushconfig-title">2.提供Android厂商通道功能，覆盖国内Android 95%机型，包括华为、小米、VIVO、OPPO机型</span>
        <span class="pushconfig-title">3.不支持厂商通道推送的Android机型，走极光推送</span>
      </div>
    </el-card>
    <el-card class="pushconfig-infoCard" header="应用信息">
      <div class="pushconfig-titleView">
        <span class="pushconfig-infoText">{{'AppKey: ' + appKey}}</span>
        <span class="pushconfig-infoText">{{'Secret Key: ' + configData.secretKey}}</span>
      </div>
    </el-card>
    <el-card class="pushconfig-infoCard" header="极光配置">
      <el-form label-width="120px" ref="jPushInfo" :model="configData" :rules="jpushRoles">
        <el-form-item label="App key" prop="jgAppKey">
          <el-input v-model="configData.jgAppKey" placeholder="必填，极光App Key"></el-input>
        </el-form-item>
        <el-form-item label="Master Secret" prop="jgMasterSecret">
          <el-input v-model="configData.jgMasterSecret" placeholder="必填，极光Master Secret"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <el-tabs class="pushconfig-tab" type="border-card">
      <el-tab-pane label="Android">
        <el-link type="primary" href="http://open-appsp.anji-plus.com/sp/file/download/push_android_demo.zip" target="_blank" style="marginBottom: 10px;">下载Android推送Demo</el-link>
        <el-form label-width="120px" ref="androidInfo" :model="configData" :rules="jpushRoles">
          <el-form-item label="Package Name" prop="packageName">
            <el-input v-model="configData.packageName" placeholder="必填，安卓包名"></el-input>
          </el-form-item>
        </el-form>
        <div class="tabBaseView">
          <el-switch class="channelEnableView"
            v-model="configData.channelEnable"
            inactive-text="是否启用厂商通道">
          </el-switch>
          <el-tabs class="pushconfig-channelTab" type="border-card">
            <el-tab-pane label="华为">
              <el-form label-width="110px" :model="configData" :disabled="configData.channelEnable != true">
                <el-form-item label="App ID">
                  <el-input v-model="configData.hwAppId" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="App Secret">
                  <el-input v-model="configData.hwAppSecret" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="Default Title">
                  <el-input v-model="configData.hwDefaultTitle" placeholder="必填，建议使用应用名"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="小米">
              <el-form label-width="110px" :model="configData" :disabled="configData.channelEnable != true">
                <el-form-item label="App ID">
                  <el-input v-model="configData.xmAppId" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="App Secret">
                  <el-input v-model="configData.xmAppSecret" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="Default Title">
                  <el-input v-model="configData.xmDefaultTitle" placeholder="必填，建议使用应用名"></el-input>
                </el-form-item>
                <el-form-item label="App Key">
                  <el-input v-model="configData.xmAppKey" placeholder="必填，请输入App Key"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="VIVO">
              <el-form label-width="110px" :model="configData" :disabled="configData.channelEnable != true">
                <el-form-item label="App ID">
                  <el-input v-model="configData.voAppId" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="App Secret">
                  <el-input v-model="configData.voAppSecret" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="Default Title">
                  <el-input v-model="configData.voDefaultTitle" placeholder="必填，建议使用应用名"></el-input>
                </el-form-item>
                <el-form-item label="App Key">
                  <el-input v-model="configData.voAppKey" placeholder="必填，请输入App Key"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="OPPO">
              <el-form label-width="110px" :model="configData" :disabled="configData.channelEnable != true">
                <el-form-item label="App ID">
                  <el-input v-model="configData.opAppId" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="App Secret">
                  <el-input v-model="configData.opAppSecret" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="Default Title">
                  <el-input v-model="configData.opDefaultTitle" placeholder="必填，建议使用应用名"></el-input>
                </el-form-item>
                <el-form-item label="App Key">
                  <el-input v-model="configData.opAppKey" placeholder="必填，请输入App Key"></el-input>
                </el-form-item>
                <el-form-item label="Master Secret">
                  <el-input v-model="configData.opMasterSecret" placeholder="必填，请输入厂商的Master Secret"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="iOS">
        <el-link type="primary" href="http://open-appsp.anji-plus.com/sp/file/download/push_ios_demo.zip" target="_blank">下载iOS推送Demo</el-link>
        <div class="tabBaseView">
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button class="saveBtn" type="primary" @click="saveClick">保存</el-button>
  </div>
</template>

<script>
import { getPushConfig, savePushConfig } from '@/api/push'
import {saveKeys} from '@/utils/enums'
import {Message} from 'element-ui'
import { copyObj } from '@/utils/util'

export default {
  name: 'PushConfig',
  data() {
    return {
      loading: false,
      appId: '',
      appKey: '',
      appName: '',
      // 配置信息
      configData: {
        // 应用信息Secret Key
        secretKey: '',
        // 极光配置 App Key
        jgAppKey: '',
        // 极光配置 Master Secret
        jgMasterSecret: '',
        // 安卓Package Name
        packageName: '',

        // 是否打开厂商通道配置
        channelEnable: false,

        // 华为 App ID
        hwAppId: '',
        // 华为 App Secret
        hwAppSecret: '',
        // 华为 Default Title
        hwDefaultTitle: '',

        // 小米 App ID
        xmAppId: '',
        // 小米 App Secret
        xmAppSecret: '',
        // 小米 Default Title
        xmDefaultTitle: '',
        // 小米 App Key
        xmAppKey: '',

        // VIVO App ID
        voAppId: '',
        // VIVO App Secret
        voAppSecret: '',
        // VIVO Default Title
        voDefaultTitle: '',
        // VIVO App Key
        voAppKey: '',

        // OPPO App ID
        opAppId: '',
        // OPPO App Secret
        opAppSecret: '',
        // OPPO Default Title
        opDefaultTitle: '',
        // OPPO App Key
        opAppKey: '',
        // OPPO Master Secret
        opMasterSecret: ''
      },
      // 极光配置校验
      jpushRoles: {
        jgAppKey: [
          { required: true, message: '请输入极光App Key', trigger: 'blur'}
        ],
        jgMasterSecret: [
          { required: true, message: '请输入极光Master Secret', trigger: 'blur' }
        ],
        packageName: [
          { required: true, message: '请输入安卓包名', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        if(route.path == '/app/pushconfig') {
          this.getConfigInfo()
        }
      },
    }
  },
  created() {
    let info = JSON.parse(sessionStorage.getItem(saveKeys().APP_INFO));
    this.appId = info.appId;
    this.appKey = info.appKey;
    this.appName = info.appName;

    this.getConfigInfo()
  },
  methods: {
    // 查询
    getConfigInfo() {
      var that = this
      that.loading = true;
      getPushConfig(that.appId).then(response => {
        if(response.data.repData != null) {
          that.configData = response.data.repData
          that.configData.channelEnable = Boolean(that.configData.channelEnable)
        }
        that.loading = false
      }).catch(error => {
        that.loading = false
      })
    },
    // 保存
    saveClick() {
      var that = this
      var param = copyObj(that.configData)
      param.channelEnable = Number(param.channelEnable)
      // 校验极光配置
      const p1 = new Promise((resolve, reject) => {
        that.$refs.jPushInfo.validate((valid) => {
          if (valid) resolve();
        });
      });
      // 数据源组件form校验
      const p2 = new Promise((resolve, reject) => {
        that.$refs.androidInfo.validate(
          (valid) => {
            if (valid) resolve();
          }
        );
      });

      let reqData = {...param, ...{appId: that.appId, appKey: that.appKey}}
      
      Promise.all([p1, p2]).then(async () => {
        that.loading = true
        savePushConfig(reqData).then(response => {
          console.log('保存结果：', response)
          that.loading = false
          Message({
            message: "更新成功",
            type: 'success',
            duration: 1000
          })
        }).catch(error => {
          that.loading = false
        })
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.pushconfig {
  &-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px;
  }
  &-titleCard {
    width: 100%;
    background-color: #f4fbff;
    border-style: none;
    margin-bottom: 10px;
  }
  &-infoCard {
    width: 100%;
    border-style: none;
    margin-bottom: 10px;
  }
  &-titleView {
    display: flex;
    flex-direction: column;
  }
  &-title {
    color: #6e6e6e;
    font-size: 14px;
    line-height: 18px;
  }
  &-infoText {
    color: #6e6e6e;
    font-size: 16px;
    line-height: 26px;
  }
  &-tab {
    width: 100%;
  }
  &-channelTab {
    width: 100%;
    margin-top: 15px;
  }
}
.tabBaseView {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
.saveBtn {
  width: 200px;
  height: 48px;
  margin: 20px;
}
.channelEnableView {
  width: 165px;
}
</style>
